<template>
  <div ref="border5" class="border-wrap">
    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" fill="none" :width="width" :height="height">
      <polygon
        :fill="bgColor"
        :points="`
        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
      `"
      />

      <polyline
        class="dv-bb5-line-1"
        :stroke="borderColor[0]"
        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
      />
      <polyline
        class="dv-bb5-line-2"
        :stroke="borderColor[1]"
        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
      />
      <polyline class="dv-bb5-line-3" :stroke="borderColor[1]" :points="`50, 13 ${width - 35}, 13`" />
      <polyline class="dv-bb5-line-4" :stroke="borderColor[1]" :points="`15, 20 ${width - 35}, 20`" />
      <polyline class="dv-bb5-line-5" :stroke="borderColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
      <polyline class="dv-bb5-line-6" :stroke="borderColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
    </svg>
  </div>
</template>

<script>

export default {
  props: {
    bgColor: {
      type: String,
      default: () => 'transparent'
    },
    borderColor: {
      type: Array,
      default: () => ['red', 'rgba(0,0,255,0.8)']
    },
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    },
    reverse: {
      type: Boolean,
      default: () => false
    }
  }

}
</script>

<style scoped="scoped" lang="less">
     .dv-reverse {
       transform: rotate(180deg);
     }

     .dv-svg-container {
       position: absolute;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 100%;

     }

     .dv-bb5-line-1, .dv-bb5-line-2 {
       stroke-width: 1;
     }

     .dv-bb5-line-3, .dv-bb5-line-6 {
       stroke-width: 5;
     }

     .dv-bb5-line-4, .dv-bb5-line-5 {
       stroke-width: 2;
     }

</style>
